<template>
	<view class="bg-white">
		<cu-custom bgColor="bg-gradual-pink" :isBack="true"><block slot="backText">返回</block>
			<block slot="content">立即报名</block>
		</cu-custom>
		<view class="joinview">
			<view class="join_team_title">
				 报名信息
			</view>
			<view class="join_team">
				<view class="cu-form-group">
					<view class="title">选择队伍</view>
					<picker @change="PickerChange" :value="picker[index].id" :data-tel="picker[index].manager_tel" :range="picker" range-key="name">
						<view class="picker">
							{{picker[index].name}}
						</view>
					</picker>
				</view>
				<view class="cu-form-group">
					<view class="title">
						队伍联系方式:{{tel}}
					</view>
				</view>
				<view class="cu-form-group team_member">
					<view class="title">队员信息:</view>
					<button class="bg-blue round sm" @tap="showModal" data-target="DialogModal1"> 添加</button>
					<button class="bg-blue round sm" @click="delm">删除</button>
				</view>
				
				<view class="cu-modal" :class="modalName=='DialogModal1'?'show':''">
					<view class="cu-dialog">
						<view class="cu-bar bg-white justify-end">
							<view class="content">添加队员</view>
							<view class="action" @tap="hideModal">
								<text class="cuIcon-close text-red"></text>
							</view>
						</view>
						<view class="padding-xl">
							<view class="cu-form-group">
								<view class="title">姓名：</view>
								<input placeholder="姓名" class="adm" v-model="member_name"/>
							</view>
							<view class="cu-form-group">
								<view class="title">电话：</view>
								<input placeholder="电话" class="adm" v-model="member_tel"/>
							</view>
							
						</view>
						<view class="cu-bar bg-white justify-end">
							<view class="action">
								<button class="cu-btn line-green text-green" @tap="hideModal">取消</button>
								<button class="cu-btn bg-green margin-left" @tap="sureModal">确定</button>
				
							</view>
						</view>
					</view>
				</view>
				
				<view class="teammember">
					<view class="flex tmm">
						<label  class="tmck"></label>
						<view class="tmname">姓名</view>
						<view class="tmtel">联系方式</view>
					</view>
					<checkbox-group @change="memberchange">
						<view class="flex tmm" v-for="(item,index) in teammembers">
							<label class="tmck"><checkbox :checked="item.name==''?true:false" :value="item.tel" /></label>
							<view class="tmname">{{item.name}}</view>
							<view class="tmtel">{{item.tel}}</view>
						</view>
						
					</checkbox-group>
					
				</view>
			</view>
			
			<view class="join_team_title">
				 参赛费用
			</view>
			<view class="cu-form-group">
				<view>费用总计: {{money}}元</view>
			</view>
			<view class="cu-form-group">
				<view>支付方式:线下支付</view>
			</view>
			
			
		</view>
		<view class="joinbtn">
			<button class="bg-blue" @click="join">立即报名</button>
		</view>
	</view>
</template>


<script>
	export default {
		onLoad(option) {
			this.mid=option.mid;
			console.log(this.mid);
			this.userid =uni.getStorageSync("uid");
			this.openid =uni.getStorageSync("openid");
			if(this.userid.length<=0 || this.openid.length<=0){
				uni.showModal({
				    title: '登陆提示',
				    content: '您暂未登陆,是否马上登陆',
				    success: function (res) {
				        if (res.confirm) {
				           uni.switchTab({
				           	url:"/pages/tennis/user/index"
				           })
				        } else if (res.cancel) {
				           uni.navigateBack({
				           	
				           })
				        }
				    }
				});
				return;
			}
			
			uni.showLoading({
				title:'加载中..'
			})
			uni.request({
				url:"https://www.52tennis.cn/Match/GetTeamJoinInfo",
				data: {
					matchid:this.mid,
					userid:this.userid,
				},
				success:(data)=> {
					console.log(data);
					if(data.data.result==1){
						console.log(data.data.returnjson);
						this.ts=data.data.returnjson;
						this.money = this.ts.fee;
						if(this.ts.cs!=null && this.ts.cs.length>0){
							this.picker= this.ts.cs;
							this.index=this.ts.cs[0].id;
							this.tel=this.ts.cs[0].manager_tel;
						}else{
							uni.showModal({
							    title: '提示',
							    content: '您暂无俱乐部/协会,无法报名参赛',
							    success: function (res) {
							        if (res.confirm) {
							           uni.switchTab({
							           	url:"/pages/tennis/user/index"
							           })
							        } else if (res.cancel) {
							           uni.navigateBack({
							           	
							           })
							        }
							    }
							});
							return;
						}
						
					}else{
						uni.showModal({
						    title: '错误提示',
						    content: data.data.msg,
						    success: function (res) {
						        if (res.confirm) {
						        } else if (res.cancel) {
						          
						        }
						    }
						});
					}
				},
				complete: () => {
					uni.hideLoading();
				}
			});
		},
		data() {
			return {
				index:0,
				picker:[],
				mid:'',
				userid:'',
				openid:'',
				ts:{},
				money:0,
				tel:'',
				teammembers:[],
				modalName:null,
				member_name:'',
				member_tel:'',
				delmember:[]
			}
		},
		methods: {
			PickerChange(e){
				console.log(e);
				this.index=e.detail.value;
				this.tel=e.currentTarget.dataset.tel;
			},
			
			delm(e){
				let _this = this;
				if(_this.delmember.length<=0){
					uni.showModal({
					    title: '错误提示',
					    content: '请选择要移除的队员',
					    success: function (res) {
					        if (res.confirm) {
					        } else if (res.cancel) {
					          
					        }
					    }
					});
					return;
				}
				uni.showModal({
				    title: '确认提示',
				    content: '是否确认移除选中队员?',
				    success: function (res) {
				        if (res.confirm) {
							for (let i = 0 ;i<_this.teammembers.length;i++) {
								for (let j= 0;j<_this.delmember.length;j++) {
									if(_this.teammembers[i].tel == _this.delmember[j]){
										_this.teammembers.splice(i,1);
									}
								}
							}
							
				        } else if (res.cancel) {
				          
				        }
				    }
				});
				
				
			},
			showModal(e){
				this.modalName=e.currentTarget.dataset.target;
				this.member_name='';
				this.member_tel='';
			},
			hideModal(e){
				this.modalName=null;
			},
			sureModal(e){
				if(this.member_name.length<=0 || this.member_tel.length<=0){
					uni.showModal({
					    title: '错误提示',
					    content: '请将姓名电话填写完整',
					    success: function (res) {
					        if (res.confirm) {
					        } else if (res.cancel) {
					          
					        }
					    }
					});
					return;
				}
				
				for (let i =0 ;i<this.teammembers.length;i++) {
					if(this.teammembers[i].name==this.member_name || this.teammembers[i].tel==this.member_tel){
						uni.showModal({
						    title: '错误提示',
						    content: '姓名或电话已经存在,请勿重复',
						    success: function (res) {
						        if (res.confirm) {
						        } else if (res.cancel) {
						          
						        }
						    }
						});
						return;
					}
				}
				
				let reg=/^1[3456789]\d{9}$/
				if(!reg.test(this.member_tel)){
					uni.showModal({
					    title: '错误提示',
					    content: '电话输入有误',
					    success: function (res) {
					        if (res.confirm) {
					        } else if (res.cancel) {
					          
					        }
					    }
					});
					return;
				}
				
				
				if(this.teammembers.timelength<=0){
					this.teammembers=[{name:this.member_name,tel:this.member_tel}];
				}
				else{
					this.teammembers.push({name:this.member_name,tel:this.member_tel});
				}
				this.modalName=null;
				
			},
			memberchange(e){
				this.delmember=e.detail.value;
			},
			
			join(e){
				if(this.teammembers.length<=0){
					uni.showModal({
					    title: '失败提示',
					    content: '请至少添加一名队员',
					    success: function (res) {
					        if (res.confirm) {
					        } else if (res.cancel) {
					          
					        }
					    }
					});
					return;
				}
				
				let members="";
				for(let i = 0 ;i<this.teammembers.length;i++){
					members+=this.teammembers[i].name+":"+this.teammembers[i].tel+";";
				}
				members=members.substring(0,members.length-1);
				
				uni.request({
					url:"https://www.52tennis.cn/Match/InsertTeamMatch",
					header:{
						'Content-Type': 'application/json;charset=UTF-8' //自定义请求头信息
					},
					method:'POST',
					data: {
						'userid':this.userid,
						'matchid':this.mid,
						'teamname':this.picker[this.index].name,
						'team_tel':this.tel,
						'team_users':members,
						'total_fee':this.money
					},success:(data)=> {
						console.log(data);
						if(data.data.result==1){
							uni.showToast({
								title: '报名成功',
								icon: 'success',
								mask: true,
								duration: 3000
							})
							setTimeout(function(){
								uni.navigateBack({
									
								})
							},2000)
							
						}else{
							uni.showModal({
							    title: '报名失败',
							    content: data.data.msg,
							    success: function (res) {
							        if (res.confirm) {
							           uni.navigateBack({
							           	
							           })
							        } else if (res.cancel) {
							           
							        }
							    }
							});
						}
					}
						
				})
				
			}
			
		}
	}
</script>

<style>
	.joinview{
		padding:30rpx;
	}
	.join_team_title{
		color:#000000;
		font-size: 34rpx;
		padding: 15rpx 0rpx;
	}
	
	.joinbtn{
		position: fixed;
		bottom: 5%;
		width: 100%;
	}
	.joinbtn button{
		width:90%;
		height:80rpx;
		line-height: 80rpx;
		font-size: 30rpx;
	}
	.team_member .title{
		width: 50%;
	}
	.team_member button{
		height: 60rpx;
		line-height: 60rpx;
		font-size: 26rpx;
	}
	.teammember{
		text-align: center;
	}
	.teammember checkbox{
		transform: scale(0.7);
	}
	.adm{
		text-align: left;
		border:1rpx solid #808080;
		border-radius: 5rpx;
		height: 60rpx;
		line-height: 60rpx;
		margin-left: 10rpx;
		padding-left: 10rpx;
		border-left:2rpx solid #808080;
	}
	.tmm{
		margin-top: 15rpx;
		height: 60rpx;
		line-height: 60rpx;
		margin-left: 10%;
	}
	.tmck{
		width: 10%;
	}
	.tmname{
		width: 20%;
	}
	.tmtel{
		width: 30%;
	}
	
</style>
